<template>
  <div class="collect" v-if="data">
    <page-title :title="data.ptitle"></page-title>
    <swiper v-if="data.content && data.content.gainWechatImg" :aspect-ratio="1/4" :show-dots="false" loop auto class="cl-swiper">
      <img :src="data.content.gainWechatImg">
    </swiper>
    <article class="article">
      <div class="dt-header">
        <h2>{{data.ptitle}}</h2>
        <p class="dt-info">
          <span class="pushdate">
            <span>{{data.release_time}}</span>
          </span>
          <span class="author">{{data.name}}</span>
        </p>
      </div>
      <div class="rich-ctx" v-html="data.rich_ctx">
        <!-- 富文本编辑区域，自定义内容为HTML格式 -->
      </div>
    </article>
    <div class="cl-quest">
      <div class="cl-title">
        <i class="iconfont icon-collect"></i>
        <span>征集问题</span>
      </div>
      <!--1.文本 2.单选 3.复选 4.文本域 5.文件框 6.下拉框 7.超链 8.日期型 9.时间型 10.日期时间型-->
      <div class="cl-box" v-for="(item,index) in data.content.gainColumns" :key="index" v-if="item.visible_type!=2">
        <span hidden>{{item.id}}</span>
        <p class="title">
          <b class="index">{{index+1}}.</b> {{item.name}}
          <i v-if="item.must_or_option==1" class="must">*</i>
        </p>
        <div class="cl-group" v-if="item.type== '1'">
          <input type="text" v-model="item.value" @blur="temporaryRepair()">
        </div>
        <div class="cl-group" v-if="item.type== '2'">
          <!-- <radio title="title" :options="item.remark" v-model="item.value" @on-change="change"></radio> -->
          <checklist :options="item.remark" :max="1" v-model="item.value" @on-change="change"></checklist>
        </div>
        <div class="cl-group" v-if="item.type== '3'">
          <checklist :options="item.remark" v-model="item.value" @on-change="change"></checklist>
        </div>
        <div class="cl-group" v-if="item.type== '4'">
          <x-textarea :max="100" :placeholder="'请输入你想说的话'" :rows="3" v-model="item.value"></x-textarea>
        </div>
        <div class="cl-group" v-if="item.type=='6'">
          <selector ref="defaultValueRef" placeholder="请选择" :options="item.remark" @on-change="change" v-model="item.value"></selector>
        </div>
        <div class="cl-group" v-if="item.type== '7'">
          <input type="text" :placeholder="'请填写超链接'" v-model="item.value" @blur="temporaryRepair()">
        </div>
        <div class="cl-group" v-if="item.type== '8'">
          <datetime v-model="item.value" @on-change="change" :placeholder="'请选择日期'"></datetime>
        </div>
        <div class="cl-group" v-if="item.type== '9'">
          <datetime v-model="item.value" format="HH:mm" @on-change="change" :placeholder="'请选择时间'"></datetime>
        </div>
        <div class="cl-group" v-if="item.type== '10'">
          <datetime v-model="item.value" required format="YYYY-MM-DD HH:mm" @on-change="change" :placeholder="'请选择时间日期'"></datetime>
        </div>
        <div class="cl-group" v-if="item.type== '5'">
          <mutiple-file-upload :onlyImg="false" field="gainColumns" :subIndex="index" subField="value" :orignFileList="item.value" @callBack2="ChangeCanUploadAll" @callBack="mutipleFileUploadCallBack"></mutiple-file-upload>
        </div>

      </div>
      <x-button type="primary" :show-loading="showLoading" @click.native="submit">提交</x-button>
    </div>
  </div>
</template>

<script>
//征集
import { getGainByGainId, saveGainFeedback } from "@/api/community";
import { recordIUseOrTelLinkMan } from "@/api/spread";
//vux
import { Swiper, XButton, Datetime, XTextarea, Selector, Radio, Checklist } from "vux";

//上传
import mutipleFileUpload from "@/components/MutipleFileUpload";
import { getEnterpriseInfo } from "@/api/enterprise"
export default {
  data() {
    return {
      //征集id
      gainId: this.$route.query.gainId,
      eid: this.$route.query.eid,
      //提交按钮
      showLoading: false,
      data: null,
      //活动id
      activity_id: null,
      //分享者ID
      shareUserId: this.$route.query.shareUserId,
      //传播ID
      id: this.$route.query.id,
      canUploadAll: false,
    };
  },
  components: {
    Swiper,
    Datetime,
    XTextarea,
    Selector,
    XButton,
    Radio,
    Checklist,
    mutipleFileUpload
  },

  methods: {
    change(value) { },
    //强制刷新input焦点
    temporaryRepair() {
      var currentPosition, timer;
      var speed = 1;//页面滚动距离
      timer = setInterval(function () {
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
        currentPosition -= speed;
        window.scrollTo(1, currentPosition);//页面向上滚动
        currentPosition += speed; //speed变量
        window.scrollTo(1, currentPosition);//页面向下滚动
        clearInterval(timer);
      }, 1);
    },
    // 多文件上传回调函数
    mutipleFileUploadCallBack(field, fileList, subIndex, subField, canUploadAll) {
      if (subField) {
        this.data.content[field][subIndex][subField] = fileList;
        this.canUploadAll = canUploadAll;
      } else {
        this.data.content[field] = fileList;
      }
    },
    ChangeCanUploadAll(canUploadAll) {
      this.canUploadAll = canUploadAll
    },

    submit() {
      let self = this;
      let ok = true;
      let array = this.data.content.gainColumns;
      let contents = [];
      //判断是否合乎要求
      for (var index = 0; index < array.length; index++) {
        if (
          array[index].visible_type != 2 &&
          array[index].must_or_option == 1
        ) {
          if (array[index].type != 5) {
            if (!array[index].value) {
              this.$vux.alert.show({
                title: "提示信息",
                content: array[index].name + "一定要填哦",
                onShow() {
                  console.log("Plugin: I'm showing");
                },
                onHide() {
                  console.log("Plugin: I'm hiding now");
                }
              });
              ok = false;
              return;
            }
          } else {
            if (array[index].value.length == 0) {
              this.$vux.alert.show({
                title: "提示信息",
                content: array[index].name + "至少上传一张吧",
                onShow() {
                  console.log("Plugin: I'm showing");
                },
                onHide() {
                  console.log("Plugin: I'm hiding now");
                }
              });
              ok = false;
              return;
            }
          }
        }
        //如果value不为空，在拼接结果
        // if (array[index].value) {
        //     contents.push(array[index])
        // }
      }
      if (this.canUploadAll == true) {
        console.log(this.canUploadAll)
        this.$vux.confirm.show({
          title: "你有未上传的图片",
          content: "请上传后重新点击",
          onShow() {
            console.log("plugin show");
          },
          onHide() {
            console.log("Plugin: I'm hiding now");
          },
          onCancel() {
            console.log("plugin cancel");
          },
          onConfirm() {
            console.log("plugin confirm");
            return;
          }
        });
      } else {
        this.$vux.confirm.show({
          title: "确认信息",
          content: "以上信息确定要提交么？",
          onShow() {
            console.log("plugin show");
          },
          onHide() {
            console.log("Plugin: I'm hiding now");
          },
          onCancel() {
            console.log("plugin cancel");
          },
          onConfirm() {
            console.log("plugin confirm");
            if (ok) {
              self.showLoading = true;
              saveGainFeedback(
                self.gainId,
                JSON.stringify(array),
                self.activity_id,
                self.eid,
                self.shareUserId
              ).then(res => {
                console.log(res)
                if (res.state = "ok") {

                  self.$vux.toast.show({
                    type: 'success',
                    width: '70%',
                    time: 3000,
                    text: '您的征集已提交！'
                  })

                  setTimeout(() => {
                    //跳转页面
                    self.$router.push({
                      path: "/collectReceiptList",
                      params: { openId: this.openId }
                    });
                    // location.href = process.env.HOST_WECHAT_WEB + '/#/collectReceiptList?openId=' + this.openId

                  }, 2000);
                } else {
                  this.$vux.alert.show({
                    title: "提示信息",
                    content: res.mesg
                  });
                }
                self.showLoading = false;
              });
            }
          }
        });
      }

    }
  },
  async created() {
    this.$vux.loading.show({
      text: "Loading"
    });
    await setTimeout(() => {
      //根据征集id获取征集
      getGainByGainId(this.gainId, this.eid)
        .then(async (res) => {
          //获取活动id
          this.activity_id = res.gain.activity_id;
          //传过来的值赋给data
          res.gain.content = JSON.parse(res.gain.content);
          res.gain.content.gainColumns.forEach(function (element) {
            element.value = null;
            if (element.type == 5) {
              element.value = [];
            }
            if (element.remark) {
              element.remark = element.remark.split("\n");
            }
          }, this);
          this.data = res.gain;
          this.data.content.gainColumns = this.data.content.gainColumns.filter(
            item => item.visible_type != 2
          );
          //转发分享logo
          let share_thumburl = this.data.share_thumburl;
          if (!share_thumburl) {
            await getEnterpriseInfo().then(resc => {
              console.log(resc.enterprise.logo_1x1)
              share_thumburl = resc.enterprise.logo_1x1;
            });
          }
          console.log(share_thumburl)

          // 获取微信分享参数(同步)
          let shareParams = {
            title: this.data.share_title ? this.data.share_title : this.data.title,
            desc: this.data.share_remarks ? this.data.share_remarks : this.data.title,
            imgUrl: share_thumburl
          }

          this.wxShareSync(res.wxShareConfig, shareParams,
            (type) => {
              this.$vux.toast.text('分享成功')
            })

          this.$vux.loading.hide();
          console.log(this.data);
        }).catch(_ => {
          console.log(_);
          this.$vux.loading.hide();
        });
    }, 800);
    if (this.id) {
      recordIUseOrTelLinkMan(this.id, 4).then()
    }
    console.log(this.canUploadAll)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
